<template>
  <q-dialog elevated v-model="dialog" position="right" full-height maximized>
    <q-card style="width: 350px">
      <q-scroll-area class="fit q-pa-md">
        <div>
          <div class="row justify-between items-center">
            <div class="text-subtitle1">新增菜单</div>
            <q-btn icon="close" flat dense @click="dialog = !dialog" />
          </div>
          <q-separator />
          <q-form class="column mt-10px q-gutter-y-xs">
            <q-select
              v-model="menuFormData.menu_type"
              :options="menuType"
              map-options
              emit-value
              label="菜单类型"
            />
            <q-input v-model="menuFormData.menu_name" label="菜单名称" />
            <q-input v-model="menuFormData.route_name" label="路由名称" />
            <q-input v-model="menuFormData.route_path" label="路由路径" />
            <q-input v-model="menuFormData.order" type="number" label="排序" />
            <q-select
              v-model="menuFormData.status"
              :options="menuStatus"
              map-options
              emit-value
              label="状态"
            />
            <q-input v-model="menuFormData.component" label="组件" />
            <q-input v-model="menuFormData.icon" label="图标">
              <template v-slot:append>
                <q-icon :name="menuFormData.icon" />
              </template>
            </q-input>
          </q-form>
          <q-separator />
        </div>
        <div class="row q-my-md justify-start q-gutter-sm">
          <div>
            <q-btn
              class="mr-10px"
              outline
              dense
              icon="cancel"
              label="取消"
              @click="dialog = !dialog"
            />
            <q-btn outline dense icon="save" label="保存" @click="save" />
          </div>
        </div>
        <div>
          <pre>{{ menuFormData }}</pre>
        </div>
      </q-scroll-area>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
import type { MenuTree } from 'src/api/globals'
import { addMenu } from 'src/api/methods/menu'
import { ref, watch } from 'vue'

defineOptions({
  name: 'addDialogPage',
})

// 移除id
type addMenuType = Omit<MenuTree, 'id' | 'children'>

const dialog = defineModel<boolean>('dialog', { required: true })
const pMenuId = defineModel<number>('pMenuId', { required: true })

// 自定义事件
const emit = defineEmits<{
  success: []
}>()

// 1. 初始化表单数据
const initFormData = (): addMenuType => ({
  menu_name: '',
  menu_type: '',
  route_name: '',
  route_path: '',
  component: '',
  order: 0,
  parent_id: 0,
  icon: '',
  menu_meta: {
    href: '',
    multi_tab: false,
    hide_in_menu: false,
    redirect: '',
    constant: false,
  },
  status: '1',
  redirect: '',
  constant: false,
})

// 2. 表单数据
const menuFormData = ref<addMenuType>(initFormData())

// 3. 监听dialog
watch(dialog, (val) => {
  if (val) {
    // 打开之后合并parent_id
    menuFormData.value = { ...initFormData(), parent_id: pMenuId.value }
  }
})

// 菜单类型
const menuType = [
  { label: '目录', value: '1' },
  { label: '菜单', value: '2' },
]
// 菜单状态
const menuStatus = [
  { label: '启用', value: '1' },
  { label: '禁用', value: '0' },
]

// 保存菜单
const save = async () => {
  await addMenu(menuFormData.value)
  emit('success')
  dialog.value = false
}
</script>

<style scoped></style>
